// 设备注册统计 饼图
<template>
    <div class="charts-pie" id="DeviceRegisteStatistic">
        
    </div>
</template>

<script>
//引入引入echarts基本模板
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
    export default {
        name:'DeviceRegisteStatistic',
        data () {
            return {
                //示例数据
                chartData:[
                    {value:10, name:'注册'},
                    {value:10, name:'未注册'},
                ]
            }
        },
        mounted: function() {
            this.drawPieOnline();
            setInterval(() => {
                this.drawPieOnline();
            }, 300000);
        },
        methods: {
            drawPieOnline() {
                var DeviceRegisteStatisticChart = this.$echarts.init(document.getElementById("DeviceRegisteStatistic"));
                var DeviceRegisteStatisticOption = null;
                DeviceRegisteStatisticOption = {
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        top:'1%',
                        containLabel: true
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: false},
                            dataView : {show: false, readOnly: false},
                            magicType : {
                                show: true, 
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'center',
                                        max: 1548
                                    }
                                }
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                        
                    },
                    calculable : true,
                    series : [
                        {
                            name:'本地和外地',
                            type:'pie',
                            radius : ['50%', '75%'],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:function(params) {
                                    //自定义颜色
                                    var colorList = [           
                                        '#fdba86','#56c9e8'
                                    ];
                                    return colorList[params.dataIndex]
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : true,
                                        position : 'center',
                                        textStyle : {
                                            fontSize : '20'
                                        }
                                    }
                                }
                            },
                            data:this.chartData
                        }
                    ]
                };
                const userInfo = JSON.parse(localStorage.getItem("userInfo"));
                $.ajax({
                    url: this.global.DeviceOnlineStat + "?appKey=" + userInfo.appKey,  //接口地址，配置在全局 golbal.vue文件
                    dataType: "json",
                    type: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    success: function(res) {
                        if(res.success == true && res.code == 200){
                            var chartData = [ 
                                {value:res.data.totalCount, name:'注册'}, 
                                {value:res.data.unregisterCount, name:'未注册'}
                            ];
                            DeviceRegisteStatisticOption.series[0].data = chartData;
                            DeviceRegisteStatisticChart.setOption(DeviceRegisteStatisticOption, true);

                            // res.data.breakdownCount;
                            // res.data.currentDayOnlineCount;
                            // res.data.currentOnlineCount;
                            // res.data.toDayTotalDistance;
                            // res.data.totalCityCount;
                            // res.data.totalCount;
                            // res.data.unregisterCount;



                        }
                        else{
                            console.log("获取图标信息失败");
                        }
                    },
                    complete: function(res) {
                        console.log("完成");
                    },
                    error: function(res) {
                        console.log("获取图标信息失败");
                    }
                });


                //做个标记
                // if (DeviceRegisteStatisticOption && typeof DeviceRegisteStatisticOption === "object") {
                //     DeviceRegisteStatisticChart.setOption(DeviceRegisteStatisticOption, true);
                // }
            }
        },
    }
</script>

<style scoped>

</style>